<template>
  <div class="app-container">
    <div class="optSignContent">
      <el-form class="sign_list"
        size="small"
        label-width="88px">
        <div style="font-size: 16px;margin-bottom: 20px;"
          class="big_title_style">
          签到规则
        </div>
        <div class="item_sign"
          v-for="(item, index) in ruleList"
          :key="index">
          <div class="item_sign_label">第{{item.theDay}}天签到</div>
          <el-form-item label="签到icon">
            <imageArraySize :imageStr.sync="item.icon"
              :key="item.theDay"
              :width="50"
              :height="50"
              :limit="1"
              :isShowMsg="false"
              :isShowUploadText="false"></imageArraySize>
          </el-form-item>
          <div class="item_award_box">
            <el-form-item label="菠萝派"
              class="item_flex_1">
              <el-input-number v-model.trim="item.rewardScore"
                placeholder="请输入奖励数量"
                :min="0"
                :max="99999999"
                :controls="false"
                style="width: 250px"></el-input-number>
            </el-form-item>
            <el-form-item label="优惠券"
              class="item_flex_1">
              <el-input v-if="item.couponName"
                disabled
                v-model.trim="item.couponName"
                style="width: 250px" />
              <el-button class="ml10"
                type="text"
                @click="toSelectData(index, 'coupon')">选择优惠券</el-button>
              <el-button v-if="item.couponName"
                class="ml10"
                type="text"
                @click="toDeleteData(index, 'coupon')"> <span class="delte_icon_text">删除</span> </el-button>
            </el-form-item>
          </div>
          <div class="item_award_box">
            <el-form-item label="服务项目"
              class="item_flex_1">
              <el-input v-if="item.itemName"
                disabled
                v-model.trim="item.itemName"
                style="width: 250px" />
              <el-button type="text"
                class="ml10"
                @click="toSelectData(index, 'service')">选择项目</el-button>
              <el-button v-if="item.itemName"
                class="ml10"
                type="text"
                @click="toDeleteData(index, 'service')"> <span class="delte_icon_text">删除</span> </el-button>
            </el-form-item>
            <el-form-item label="套餐卡"
              class="item_flex_1">
              <el-input v-if="item.cardName"
                disabled
                v-model.trim="item.cardName"
                style="width: 250px" />
              <el-button type="text"
                class="ml10"
                @click="toSelectData(index, 'card')">选择套餐卡</el-button>
              <el-button v-if="item.cardName"
                class="ml10"
                type="text"
                @click="toDeleteData(index, 'card')"> <span class="delte_icon_text">删除</span> </el-button>
            </el-form-item>
          </div>
          <div class="item_award_box">
            <el-form-item label="补签菠萝派"
              class="item_flex_1">
              <el-input v-model.trim="item.repairGoldCoin"
                placeholder="请输入补签菠萝派"
                maxlength="6"
                style="width: 250px" />
            </el-form-item>
            <!-- <el-form-item label="补签银币"
              class="item_flex_1">
              <el-input v-model.trim="item.repairSilverCoin"
                placeholder="请输入补签银币"
                maxlength="6"
                style="width: 250px" />
            </el-form-item> -->
          </div>
        </div>
      </el-form>
    </div>
    <div class="dw">
      <el-button @click="toBack"
        style="margin-top: 10px;margin-left: 40%;">返回</el-button>
      <el-button type="primary"
        @click="submitRule"
        style="margin-top: 10px;">保存</el-button>
    </div>
    <!-- 选择套餐卡 -->
    <CommodityCard :flag="showCard"
      ref="commodityCard"
      @multipleSelection="multipleSelection"
      @toCloseBox="toCloseBox" />
    <!-- 选择优惠券 -->
    <CommodityCoupon :flag="showCoupon"
      ref="commodityCoupon"
      @multipleSelection="multipleSelection"
      @toCloseBox="toCloseBox" />
    <!-- 选择项目 -->
    <CommodityItem :flag="showItem"
      ref="commodityItem"
      @multipleSelection="multipleSelection"
      @toCloseBox="toCloseBox" />
  </div>
</template>

<script>
import {
  addSignRule,
  editSignRule,
  getSignListRule
} from "@/api/service/sign";
import CommodityCard from '@/components/radio/commodityCard.vue'
import CommodityCoupon from '@/components/radio/commodityCoupon.vue'
import CommodityItem from '@/components/radio/commodityItem.vue'
import imageArraySize from "@/components/ImageUpload/imageArraySize";

export default {
  data () {
    return {
      awardId: '',
      ruleList: [],
      awardContent: [],
      signId: '',
      ruleDay: 31,
      showCard: false,
      showCoupon: false,
      showItem: false,
      pIdx: '',
      cType: '',
      isEdit: false
    }
  },
  components: {
    CommodityCard,
    CommodityCoupon,
    CommodityItem,
    imageArraySize
  },
  created () {
    // this.signId = this.$route.query.signId
    // let startDate = this.$route.query.startDate, endDate = this.$route.query.endDate
    // let times = new Date(endDate).getTime() - new Date(startDate).getTime()
    // this.ruleDay = parseInt(times / (24 * 60 * 60 * 1000)) + 1

    // this.getDetailList()
  },
  activated () {
    this.signId = this.$route.query.signId
    this.getDetailList()
  },
  methods: {
    async getDetailList () {
      let res = await getSignListRule({ ruleId: this.signId, pageSize: this.ruleDay })
      if (res) {
        let data = res.rows
        if (data && data.length > 0) {
          this.isEdit = true
          data.forEach(item => {
            //console.log(item)
            if (item.rewardCoupon) {
              item.couponName = item.rewardCoupon.couponName
            }
            if (item.rewardCard) {
              item.cardName = item.proboxCard.cardName
            }
            if (item.rewardServiceItem) {
              item.itemName = item.proboxServiceItem.itemName
            }
          })
          this.ruleList = data
        } else {
          this.initDaySet()
        }
      }
    },
    toBack () {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/centre/signIn/service/signIn",
        query: {
          t: Date.now()
        }
      });
    },
    async submitRule () {
      let list = []
      this.ruleList.forEach(item => {
        let val = {
          icon: item.icon,
          theDay: item.theDay,
          ruleId: item.ruleId,
          rewardScore: item.rewardScore,
          rewardServiceItem: item.rewardServiceItem,
          rewardCard: item.rewardCard,
          rewardCoupon: item.rewardCoupon,
          repairGoldCoin: item.repairGoldCoin,
          repairSilverCoin: item.repairSilverCoin,
        }
        if (item.detailId) {
          val.detailId = item.detailId
        }
        list.push(val)
      })
      let res = null
      if (this.isEdit) {
        res = await editSignRule(list)
      } else {
        res = await addSignRule(list)
      }
      if (res) {
        this.msgSuccess('设置成功')
        this.toBack()
      }
    },
    initDaySet () {
      for (let i = 0; i < this.ruleDay; i++) {
        this.ruleList.push({
          icon: '',
          detailId: '',
          theDay: i + 1,
          ruleId: this.signId,
          rewardScore: '',
          rewardServiceItem: '',
          rewardCard: '',
          rewardCoupon: '',
          couponName: '',
          itemName: '',
          cardName: '',
          repairGoldCoin: '',
          repairSilverCoin: '',
        })
      }
    },
    toDeleteData (index, type) {
      if (type == 'coupon') {
        this.ruleList[index].couponName = ''
        this.ruleList[index].rewardCoupon = ''
        this.$nextTick(() => {
          this.$refs.commodityCoupon.greet({})
        })
      } else if (type == 'card') {
        this.ruleList[index].cardName = ''
        this.ruleList[index].rewardCard = ''
        this.$nextTick(() => {
          this.$refs.commodityCard.greet({})
        })
      } else if (type == 'service') {
        this.ruleList[index].itemName = ''
        this.ruleList[index].rewardServiceItem = ''
        this.$nextTick(() => {
          this.$refs.commodityItem.greet({})
        })
      }
    },
    toSelectData (index, type) {
      this.pIdx = index
      this.cType = type
      if (type == 'coupon') {
        this.showCoupon = true
      } else if (type == 'card') {
        this.showCard = true
      } else if (type == 'service') {
        this.showItem = true
      }
    },
    toCloseBox () {
      this.showCard = false
      this.showCoupon = false
      this.showItem = false
      this.pIdx = ''
      this.cType = ''
    },
    multipleSelection (data) {
      this.ruleList[this.pIdx].tableData = []
      if (this.cType == 'coupon') {
        this.ruleList[this.pIdx].couponName = data.couponName
        this.ruleList[this.pIdx].rewardCoupon = data.couponUid
      } else if (this.cType == 'card') {
        this.ruleList[this.pIdx].cardName = data.cardName
        this.ruleList[this.pIdx].rewardCard = data.cardId
      } else if (this.cType == 'service') {
        this.ruleList[this.pIdx].itemName = data.itemName
        this.ruleList[this.pIdx].rewardServiceItem = data.itemId
      }
      this.toCloseBox()
    },
  }
}
</script>

<style lang="scss" scoped>
.optSignContent {
  max-width: 1200px;
  margin: 0 auto 50px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
.item_sign_label {
  font-size: 15px;
  color: #333;
  line-height: 1;
  margin-bottom: 16px;
}
.item_sign {
  &:not(:last-child) {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }
}
.item_award_box {
  display: flex;
  .item_flex_1 {
    flex: 1;
    overflow: hidden;
  }
}
.delte_icon_text {
  color: #c03639;
}
.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}
</style>
